<template>
	<div class="addlecture k w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<p><i class="line"></i>{{updateTitle}}</p>
			<!--<em @click="reBack">返回</em>-->
		</div>
		<div class="addCont">
			<div class="addName marB"><span>活动讲座标题：</span>
				<el-input placeholder="请输入标题" v-model="title" maxlength="50"></el-input>
			</div>
			<div class="addSubVideolist marB">
				<span>title配图：</span>
				<div class="updownvideo">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
					<em class="rules">建议尺寸为750*373像素，大小小于1M</em>
				</div>
			</div>
			<div class="addTime marB">
				<span>活动时间：</span>
				<el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期" value-format="yyyy-MM-dd">
    </el-date-picker>
				<!--<el-date-picker v-model="activityStartTime" type="date" placeholder="选择开始时间"  :picker-options="pickerOptionsStart"></el-date-picker>
				<!--value-format="yyyy-MM-dd HH:mm:ss" -->
				<!--<em>——</em>
				<el-date-picker v-model="activityEndTime" type="date" placeholder="选择结束时间" :picker-options="pickerOptionsEnd"></el-date-picker>-->
			</div>
			<div class="addName marB"><span>活动地址：</span>
				<el-input placeholder="请输入活动地址" v-model="address"></el-input>
			</div>
			<div class="addSubJieshao">
				<span style="margin-bottom: 25px;display: block;width: 96px;text-align: right;">内容：</span>
				<vue-ueditor-wrap v-model="msg" :config="myConfig" style="margin-left: 87px;"></vue-ueditor-wrap>
			</div>
			<div class="footerButton" v-if="nowType!='seen'">
				<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				clickLock:true,
				nowType:'',
				values: '',
				updateTitle:'新增活动讲座',
				// 编辑绑定的内容start
				id:'',
				title: '',
				imageUrl: '',
				dateRange:'',
				activityStartTime:'',
				activityEndTime:'',
				address:'',
				msg: '',
				// 编辑绑定的内容end
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 420,
					initialFrameWidth: '840'
				},
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId},
//				pickerOptionsStart: {
//	                disabledDate: (time) => {
//	                    if (this.activityEndTime) {
//	                        return time.getTime() > this.activityEndTime
//	                    }
//	 
//	                }
//	            },
//	            pickerOptionsEnd: {
//	                disabledDate: (time) => {
//	                    if(this.activityStartTime){
//	                        return time.getTime() < this.activityStartTime
//	                    }
//	                }
//	            },
			}
		},
		methods: {
			getParams() {
				console.log('dateRange:',this.dateRange);
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit'){
					this.nowType = 'edit';
					this.updateTitle = "编辑活动讲座";
				}else if(routerParams == 'seen') {
					this.nowType = 'seen';
					this.updateTitle = "查看活动讲座";
				}else{
					this.nowType = 'add';
				}
			},
			addNews(){
				let that = this;
				let s = {
					rootcompanyid:1,
					title: that.title,
					img:that.imageUrl,
					starttime: that.dateRange[0],
					endtime: that.dateRange[1],
					address:that.address,
					content: that.msg
				};
				console.log(s);
				console.log(this.dateRange);
				if(s.title=="" || s.title==null || s.title==undefined){
					this.failText = '活动标题为空';
					this.$rootFunction().deleteResFail();
				}else if(s.img=="" || s.img==null || s.img==undefined){
					this.failText = '配图为空';
					this.$rootFunction().deleteResFail();
				}else if(s.starttime=="" || s.starttime==null || s.starttime==undefined){
					this.failText = '开始时间为空';
					this.$rootFunction().deleteResFail();
				}else if(s.endtime=="" || s.endtime==null || s.endtime==undefined){
					this.failText = '结束时间为空';
					this.$rootFunction().deleteResFail();
				}else if(s.address=="" || s.address==null || s.address==undefined){
					this.failText = '地址为空';
					this.$rootFunction().deleteResFail();
				}else{
					if(this.clickLock==true){
						this.clickLock = false;
						this.$ajax({
							url: this.$root.jifuUrl + '/addActivityLecture',
							method: 'POST',
							data: this.qs.stringify(s),
							success: res => {
								if(res.data.code == 200) {
									this.$refs.alert.show({alertText: '保存成功'});
									setTimeout(() =>{
										this.$router.push({
											name:'lecture'
										});
									},2000)
								}else{
									this.clickLock = true;
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();
								}
							}
						});
					}
				}
			},
			updateNews() {
				//编辑咨询
				let that = this;
				let s = {
					id:that.id,
					rootcompanyid:1,
					title: that.title,
					img:that.imageUrl,
					starttime: that.dateRange[0],
					endtime: that.dateRange[1],
					address:that.address,
					content: that.msg
				};
				console.log(s);
				console.log('update:',this.dateRange);
				if(s.title=="" || s.title==null || s.title==undefined){
					this.failText = '活动标题为空';
					this.$rootFunction().deleteResFail();
				}else if(s.img=="" || s.img==null || s.img==undefined){
					this.failText = '配图为空';
					this.$rootFunction().deleteResFail();
				}else if(s.starttime=="" || s.starttime==null || s.starttime==undefined){
					this.failText = '开始时间为空';
					this.$rootFunction().deleteResFail();
				}else if(s.endtime=="" || s.endtime==null || s.endtime==undefined){
					this.failText = '结束时间为空';
					this.$rootFunction().deleteResFail();
				}else if(s.address=="" || s.address==null || s.address==undefined){
					this.failText = '地址为空';
					this.$rootFunction().deleteResFail();
				}else{
					this.$ajax({
						url: this.$root.jifuUrl + '/updateActivityLecture',
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功'});
								setTimeout(() =>{
									this.$router.push({
										name:'lecture'
									});
								},2000)
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
				
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.addNews();
				}else if(this.nowType == 'edit') {
					this.updateNews();
				}
			},
			cancel() {
				this.$router.go(-1);
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.imageUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			reBack(){
				this.$router.go(-1);
			}
		},
		components:{
			alert
		},
		mounted: function(){
			this.getParams();
			if(this.nowType=="edit"||this.nowType=='seen'){
				console.log('306',this.nowType,this.$root.lectureMsg);
				this.id = this.$root.lectureMsg.id;
				this.title = this.$root.lectureMsg.title;
				this.imageUrl = this.$root.lectureMsg.img;
//				this.activityStartTime = this.$root.lectureMsg.starttime;
//				this.activityEndTime = this.$root.lectureMsg.endtime;
				let arr=[];
				arr.push(this.$root.lectureMsg.starttime);
				arr.push(this.$root.lectureMsg.endtime);
				this.dateRange=arr;
//				this.dateRange[0]=this.$root.lectureMsg.starttime;
//				this.dateRange[1]=this.$root.lectureMsg.endtime;
				console.log('edit',arr,this.dateRange);
				this.address = this.$root.lectureMsg.address;
				this.msg = this.$root.lectureMsg.content;
			}
		}
	} 
</script>
<style>
	.addlecture .updownvideo {position:absolute;top:0;left:117px;}
	.addlecture .addSubVideolist .avatar-uploader,.addlecture .addSubVideolist .avatar-uploader .el-upload,.addlecture .addSubVideolist .avatar-uploader-icon {width:167px;height:82px;}
	.addlecture .avatar-uploader {width:167px;height:82px;}
	.addlecture .el-button--primary.is-active,.addlecture .el-button--primary:active {background:#44CEF6;border:none}
	.addlecture .el-button--small,.addlecture .el-button--small.is-round {padding:0;}
	.addlecture .upload-demo span {border:none;font-size:14px!important;color:#fff!important;}
	.addlecture .upload-demo .el-button {border:none;}
	.addlecture .addSubVideo,.addSubVideolist {height:104px!important;position:relative;}
	.addlecture .el-upload-list {position:absolute;top:0;left:126px;}
	.addlecture .el-upload-list__item-name {font-size:14px;color:#333;}
	.addlecture .el-upload-list__item:first-child {margin-top:5px;}
	.addlecture .addSubJieshao a {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;padding:0;border:0;margin-top:135px;}
	.addlecture .addSubJieshao a:hover {background:#31c7f2;}
	.addlecture .el-select input[type="text"] {height:34px!important;width:155px;}
	.addlecture .el-input__icon {line-height:35px;}
	.addlecture .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:110px;height:82px;}
	.addlecture .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.addlecture .avatar-uploader-icon {font-size:28px;color:#8c939d;width:110px;height:67px!important;padding-top:15px;text-align:center;background:#f2f2f2;}
	.addlecture .avatar {width:167px;height:82px;display:block;}
	.addlecture .addName span,.addlecture .addSubVideo span,.addlecture .addSubVideo span,.addlecture .addSubVideolist span,.addlecture .addSubTuijian span,.addlecture .addTime span {width:113px;display:inline-block;text-align:right;}
	.addlecture .addSubVideo span,.addSubVideolist span {position:absolute;top:0;left:0;}
	.addlecture .addName .el-input,.addlecture .addName .el-input input {width:322px;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addlecture .addName.from .el-input,.addlecture .addName.from .el-input input {width:146px;}
	.addlecture span {font-size:16px;color:#333;}
	.addlecture .el-upload--picture-card {width:168px;height:82px;background:#f2f2f2;border:none;line-height:82px;}
	.addlecture.k .el-upload--picture-card i {margin-top:20px;}
	.addlecture .updownvideo .el-upload i em {font-size:14px;color:#ccc;font-style:normal;text-align:center;display:block;margin-top:6px;}
	.addlecture .updownvideo .rules {font-style:normal;font-size:12px;color:#ccc;margin-top:8px;display:block;line-height:16px;}
	.addlecture .addFeilei .el-input input,.addlecture .addFeilei .el-select,.addlecture .addFeilei .el-select .el-input{width:148px!important;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addlecture .addTime .el-date-editor input{width: 131px;height: 34px;line-height: 34px;}
	.addlecture .addTime span.el-input__prefix,.addlecture .addTime span.el-input__suffix i{width: 20px;color:#ccc;}
	.el-range-editor.el-input__inner{padding: 0 10px;}
	.addlecture .el-date-editor.el-input,.addlecture .el-date-editor.el-input__inner{width:321px;box-sizing: border-box;height: 36px;line-height: 36px;}
	.addlecture .addTime em{width: 36px;display: inline-block;color: #ccc;}
	.addlecture .addTime .el-input--prefix .el-input__inner{padding-left: 30px!important;}
</style>